<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'weather.jsp' starting page</title>
  </head>
  
  <body>
  <select id="city" onchange="sendAjax()">
  	<option>--选择城市--</option>
  	<option value="jiaozuo">焦作</option>
  	<option value="beijing">北京</option>
  	<option value="shanghai">上海</option>
  	<option value="shenzhen">深圳</option>
  </select>
  
  <div id="weather">
  	
  </div>
  
  
  <script type="text/javascript">
  	var xmlHttp;
	/*创建XMLHttpRequest对象*/
	function createXMLHttpRequest() {
		if(window.ActiveXObject) {
	  		//IE
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			//chrome firefox opera 
			xmlHttp = new XMLHttpRequest();
		}
	}
	
	function sendAjax(){
		createXMLHttpRequest();
		
		xmlHttp.onreadystatechange = callback;//回调函数
		
		var city = document.getElementById("city").value;
		
		xmlHttp.open("GET","google.jspx?city="+city,true);
		xmlHttp.send();
		
	}
	
	function callback() {
		if(xmlHttp.readyState == 4) {
			if(xmlHttp.status == 200) {
				var xml = xmlHttp.responseXML;
				
				document.getElementById("weather").innerHTML = "";
				
				var weathers = xml.getElementsByTagName("forecast_conditions");
				for(var i =0;i<weathers.length;i++){
					
					var w = weathers[i];
					
					var time = w.getElementsByTagName("day_of_week")[0].getAttribute("data");
					var low = w.getElementsByTagName("low")[0].getAttribute("data");
					var high = w.getElementsByTagName("high")[0].getAttribute("data");
					var icon = w.getElementsByTagName("icon")[0].getAttribute("data");
					var condition  = w.getElementsByTagName("condition")[0].getAttribute("data");
			
					var mydiv = document.createElement("div");
					var myimg = document.createElement("img");
					myimg.setAttribute("src", "http://www.google.com"+icon);
					
					var myh4 = document.createElement("h4");
					var msg = document.createTextNode(time+"　　最低温度:" + low + "度　　最高温度：" + high + "度  " + condition  );
					myh4.appendChild(msg);
					
					mydiv.appendChild(myimg);
					mydiv.appendChild(myh4);
					
					document.getElementById("weather").appendChild(mydiv);
					
				}
				
			} else {
				alert("Ajax Error! code:" + xmlHttp.status);
			}
		}
	}
  </script>
  </body>
</html>
